<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
    表单：
        input【输入】 label【绑定表单元素(for)】
        属性：type="" text/password/radio/checkbox/file
             name=""  标签名
             id        标识
             checked  选中【radio/checkebox】
             disabled 禁用
             placeholder 提示信息
             value 表单的值
    -->
    <div>
        搜索：<input type="text" value="默认值">
        搜索：<input type="text" disabled value="默认值">
    </div>
    <div>
        用户名：<input type="text" placeholder="请输入用户名">
    </div>
    <div>
        密码：<input type="password">
    </div>
    <div>
        <!-- 单选按钮 要实现单选，绑定同一个name-->
        性别：
        <!-- label 通过属性for绑定表单的id -->
        <input type="radio" name="gendre" id="male" value="0"> <label for="male">男</label>
        <!-- 选中通过属性 checked 与值无关 -->
        <!-- <input type="radio" name="gendre" id="female" checked="checked"> <label for="female">女</label> -->
        <input type="radio" name="gendre" id="female" checked> <label for="female">女</label>
    </div>
    <div>
        <!-- 多选按钮 -->
        爱好：
        <!-- label绑定的第二种写法 -->
        <label><input type="checkbox" checked> 篮球 </label>
        <!-- <label><input type="checkbox" disabled>足球</label> -->
        <label><input type="checkbox" disabled="disabled">足球</label>
        <label><input type="checkbox">羽毛球</label>
    </div>

    <div>
        更改头像：<input type="file" name="" id="">
    </div>
    <div>
        <!-- input type： button submit reset image-->
        <input type="button" value="普通按钮">
        <input type="submit" value="提交按钮">
        <input type="reset" value="重置按钮">
    </div>
    <!-- button 系列 -->
    <button>普通按钮</button>
    <button type="button">普通按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
</body>

</html>